<template>
  <div class="match-process">
     <div class="time-axis">
        <!--进球-->
       <div class="goal" v-for="goal in matchProcess.goalsData" :style="{'left': goal.rate}">
         <div class="goal-player" >{{goal.time}}'</div>
         <div class="goal-circle">
           <el-tooltip class="item" effect="light"  placement="top">
             <div class="player-tooltip" slot="content">
               <img class="player-img" :src="goal.playerLogo" alt="">
               <span class="player-name">{{goal.player}}</span>
             </div>
             <img src="../../../../assets/image/matchProcess/goal.svg" alt="">
           </el-tooltip>
         </div>
       </div>
       <!--黄牌-->
       <div class="goal" v-for="goal in matchProcess.yellowCardData" :style="{'left': goal.rate}">
         <div class="goal-player" >{{goal.time}}'</div>
         <div class="goal-circle">
           <el-tooltip class="item" effect="light"  placement="top">
             <div class="player-tooltip" slot="content">
               <img class="player-img" :src="goal.playerLogo" alt="">
               <span class="player-name">{{goal.player}}</span>
             </div>
             <img src="../../../../assets/image/matchProcess/yellow.svg" alt="">
           </el-tooltip>
         </div>
       </div>
       <!--红牌-->
       <div class="goal" v-for="goal in matchProcess.redCardData" :style="{'left': goal.rate}">
         <div class="goal-player" >{{goal.time}}'</div>
         <div class="goal-circle">
           <el-tooltip class="item" effect="dark"   placement="top">
             <div class="player-tooltip" slot="content">
               <img class="player-img" :src="goal.playerLogo" alt="">
               <span class="player-name">{{goal.player}}</span>
             </div>
             <img src="../../../../assets/image/matchProcess/red.svg" alt="">
           </el-tooltip>
         </div>
       </div>
       <!--换人-->
       <div class="goal" v-for="goal in matchProcess.changeData" :style="{'left': goal.rate}">
         <div class="goal-player" >{{goal.time}}'</div>
         <div class="goal-circle">
           <el-tooltip class="item" effect="light"   placement="top">
             <div class="player-tooltip" slot="content">
               <img class="player-img" :src="goal.startLogo" alt="">
               <span class="player-name">{{goal.start}}</span>
               <img class="player-img" src="../../../../assets/image/matchProcess/change.svg" alt="">
               <span class="player-name">{{goal.sub}}</span>
               <img class="player-img" :src="goal.subLogo" alt="">
             </div>
             <img src="../../../../assets/image/matchProcess/change.svg" alt="">
           </el-tooltip>
         </div>
       </div>

     </div>
     <div class="time-axis-triangle"></div>
  </div>
</template>

<script>
  export default {
    name: "MatchProcess",
    props:{
      matchProcess:{
        type:Object,
        default(){
          return {}
        }
      },
    },
    data(){
      return {
        goalsData:[
          {time:13,rate:'13.4%',player:'吕文君',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202020/Chinese%20Super%20League/L%C3%BC%20Wenjun.png'},
          {time:29,rate:'29.9%',player:'保利尼奥',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202019/Chinese%20Super%20League/Paulinho.png'},
          {time:39,rate:'40.2%',player:'蔡慧康',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202020/Chinese%20Super%20League/Cai%20Huikang.png'},
          {time:42,rate:'43.3%',player:'阿兰',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202019/Chinese%20Super%20League/Alan%20Carvalho.png'},
          {time:47,rate:'48.5%',player:'保利尼奥',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%8C%97%E4%BA%AC%E4%B8%AD%E8%B5%AB%E5%9B%BD%E5%AE%89/players/Augusto%20Renato.jpg'},
          {time:49,rate:'50.5%',player:'武磊',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/new%20photo/%E7%90%83%E5%91%98%E5%A4%B4%E5%83%8F%E8%A1%A5%E5%85%85/Wu%20Lei.jpg'},
          {time:88,rate:'90.7%',player:'胡尔克',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202019/Chinese%20Super%20League/Hulk.png'},
          {time:94,rate:'96.9%',player:'阿兰',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202019/Chinese%20Super%20League/Alan%20Carvalho.png'},
        ],
        yellowCardData:[
          {time:31,rate:'32%',player:'蔡慧康',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202020/Chinese%20Super%20League/Cai%20Huikang.png'},
          {time:44,rate:'45.4%',player:'张成林',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Zhang%20Chenglin.jpg'},
          {time:47,rate:'48.5%',player:'郑智',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Zheng%20Zhi.jpg'},
          {time:88,rate:'90.7%',player:'郜林',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%B9%BF%E5%B7%9E%E6%81%92%E5%A4%A7%E6%B7%98%E5%AE%9D/players/Gao%20Lin.jpg'},
          {time:89,rate:'91.8%',player:'胡尔克',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202019/Chinese%20Super%20League/Hulk.png'},
          {time:92,rate:'94.9%',player:'阿瑙托维奇',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/sofifa/player%20photos%202019/Chinese%20Super%20League/M.%20Arnautovi%C4%87.png'},
        ],
        redCardData:[
          {time:54,rate:'60%',player:'武磊',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%8C%97%E4%BA%AC%E4%B8%AD%E8%B5%AB%E5%9B%BD%E5%AE%89/players/Augusto%20Renato.jpg'},
          {time:63,rate:'70%',player:'权威',playerLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%8C%97%E4%BA%AC%E4%B8%AD%E8%B5%AB%E5%9B%BD%E5%AE%89/players/Augusto%20Renato.jpg'},
        ],
        changeData:[
          {time:72,rate:'80%',start:'武磊',sub:'森森',subLogo:'',startLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%8C%97%E4%BA%AC%E4%B8%AD%E8%B5%AB%E5%9B%BD%E5%AE%89/players/Augusto%20Renato.jpg',bench:'权威',benchLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%8C%97%E4%BA%AC%E4%B8%AD%E8%B5%AB%E5%9B%BD%E5%AE%89/players/Augusto%20Renato.jpg'},
          {time:81,rate:'90%',start:'权威',sub:'锋锋',subLogo:'',startLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%8C%97%E4%BA%AC%E4%B8%AD%E8%B5%AB%E5%9B%BD%E5%AE%89/players/Augusto%20Renato.jpg',bench:'权威',benchLogo:'https://bsufootball.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E8%B6%85/%E5%8C%97%E4%BA%AC%E4%B8%AD%E8%B5%AB%E5%9B%BD%E5%AE%89/players/Augusto%20Renato.jpg'},
        ],
      }
    },
    computed:{
      correctGoal(){
        return this.goalsData.map(event=>{
          return {
            ...event,
            time:event.time + '\'',
            rate:event.rate - 1.3 + '%'
          }
        })
      },
      correctYellowCard(){
        return this.yellowCardData.map(event=>{
          return {
            ...event,
            time:event.time + '\'',
            rate:event.rate - 1.3 + '%'
          }
        })
      },
      correctRedCard(){
        return this.redCardData.map(event=>{
          return {
            ...event,
            time:event.time + '\'',
            rate:event.rate - 1.3 + '%'
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
 .match-process {
   position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   width: 90%;
   height: 100%;
   /*background-color: yellow;*/
   .time-axis {
     position: relative;
     width: 96%;
     height: 10px;
     background-color: #194568;
     img {
       width: 30px;
       height: 30px;
     }
     .goal {
       position:absolute;
       top: -55px;
       .goal-circle {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 40px;
         height: 40px;
         border-radius: 20px;
         background-color: #16C79A;
       }
       .goal-player {
         height: 40px;
         line-height: 40px;
         font-size: 20px;
         font-weight: bold;
         color: #16C79A;
         text-align: center;
         /*background-color: red;*/
       }
     }
  }
   .time-axis-triangle {
     border-style: solid;
     border-width: 12px;
     border-color: transparent transparent  transparent  #194568;
     width: 0;
     height: 0;
   }
 }
 .player-tooltip {
   display: flex;
   justify-content: space-around;
   align-items: center;
   .player-img {
     width: 35px;
     height: 35px;
   }
   .player-name {
     font-size: 20px;
     font-weight: bold;
   }
 }

</style>